<template>
    <div class="setting-container">
        <el-card class="box-card" shadow="always" style="margin: 30px 10px">
            <el-form ref="form" label-width="20%">
                <el-form-item :label="$t('setting.serialPortName')">
                    <el-select v-model="serialPortName" filterable  clearable :placeholder="$t('setting.serialPortNameTip')" @change="handleSerialPortNameSelection" style="width: 80%">
                        <el-option v-for="item in serialPortNameOptions" :key="item" :label="item" :value="item" ></el-option>
                    </el-select>
                    <el-button style="margin-left: 10px" class="el-button--primary el-button--small" icon="el-icon-refresh" @click="refreshPort"></el-button>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="20%">
                <el-form-item :label="$t('lab.model')">
                    <el-select v-model="model" filterable  clearable :placeholder="$t('lab.modelTip')" @change="handleModelChange" style="width: 80%">
                        <el-option v-for="item in modelOptions" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" label-width="20%">
                <el-form-item :label="$t('setting.version')">
                   {{version}}
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import {getSerialDevice, updateSerialDeviceById} from "../../api/searialDevice";
    import {getModel, updateModelById} from "../../api/model";
    import config from '../../../package.json'
    import {isEmptyObject} from "../../utils/util";

    export default {
        data() {
            return {
                serialPortName: "",
                version: config.version,
                model:"",
                modelOptions:this.$i18n.tc("lab.modelOptions")
            }
        },
        computed:{
            serialPortNameOptions() {
                return this.$store.state.bSerialPort.deviceNameList;
            }
        },
        created() {
            console.info("create setting");
            this.$store.commit('bSerialPort/INIT_DEVICE_NAMES', {});
            this.init();
        },
        beforeDestroy() {
            console.log("beforeDestroyLab");
            // this.$store.commit('bSerialPort/CLOSE');
            // delay(500)
        },
        methods:{
            async init() {
                let serialData = await getSerialDevice(1);
                this.serialPortName = serialData.name;
                let modelData = await getModel(1);
                if (!isEmptyObject(modelData)) {
                    this.model = modelData.name;
                }
            },
            handleSerialPortNameSelection(val){
                console.info(val);
                this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: val, baudRate: 9600});
                updateSerialDeviceById(1, {name: val});
            },
            handleModelChange(val) {
                console.info(val);
                updateModelById(1, {name: val})
            },
            async refreshPort(){
                this.$store.commit('bSerialPort/INIT_DEVICE_NAMES', {});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .setting- {
        &-container {
        }
    }
</style>
